<template>
    <textarea 
        :value="modelValue" 
        :placeholder="placeholder"
        :class="[customCss, 'custom-scrollbar']" 
        ref="textareaRef"
        :style="textareaStyle"
        @input="handleInput"
        @compositionstart="handleCompositionStart"
        @compositionend="handleCompositionEnd"
        @keydown.enter="handleEnter"
    >
    </textarea>
</template>

<script setup>
import { ref, computed, nextTick, watch, onMounted, defineProps, defineEmits } from 'vue'

// 定义 props 和 emits
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  minRows: {
    type: Number,
    default: 2
  },
  maxRows: {
    type: Number,
    default: 14
  },
  customCss:{
    type: String,
    default: ''
  }
})

const emit = defineEmits([
  'update:modelValue',
  'enterPressed'
])

const textareaRef = ref(null)
const textareaCalcStyle = ref({})
const isComposing = ref(false)

// 计算文本域样式
const textareaStyle = computed(() => ({
  minHeight: '36px',
  ...textareaCalcStyle.value
}))

// 计算文本域高度（简化版）
const calcTextareaHeight = (element, minRows, maxRows) => {
  const styles = window.getComputedStyle(element)
  const paddingTop = parseInt(styles.paddingTop) || 0
  const paddingBottom = parseInt(styles.paddingBottom) || 0
  const borderTopWidth = parseInt(styles.borderTopWidth) || 0
  const borderBottomWidth = parseInt(styles.borderBottomWidth) || 0
  const lineHeight = parseInt(styles.lineHeight) || 20
  
  // 计算内容高度
  element.style.height = 'auto'
  const contentHeight = element.scrollHeight
  
  // 计算最小和最大高度
  const minHeight = lineHeight * minRows + paddingTop + paddingBottom + borderTopWidth + borderBottomWidth
  const maxHeight = lineHeight * maxRows + paddingTop + paddingBottom + borderTopWidth + borderBottomWidth
  
  let height = contentHeight
  if (height < minHeight) {
    height = minHeight
  }
  if (height > maxHeight) {
    height = maxHeight
    return { 
      height: `${maxHeight}px`,
      overflowY: 'auto'
    }
  }
  
  return { 
    height: `${height}px`,
    overflowY: 'hidden'
  }
}

// 调整文本域大小
const resizeTextarea = () => {
  if (!textareaRef.value) return
  
  const textareaStyle = calcTextareaHeight(textareaRef.value, props.minRows, props.maxRows)
  
  // 防止频繁重排的优化
  textareaCalcStyle.value = {
    overflowY: 'hidden',
    ...textareaStyle
  }
  
  nextTick(() => {
    if (textareaRef.value) {
      textareaRef.value.offsetHeight // 强制重排
      textareaCalcStyle.value = textareaStyle
    }
  })
}

// 输入处理
const handleInput = async (event) => {
  if (isComposing.value) return
  
  const value = event.target.value
  emit('update:modelValue', value)

  // 调整大小
  resizeTextarea()
}

// 中文输入法处理
const handleCompositionStart = () => {
  isComposing.value = true
}

// 中文输入法处理完毕
const handleCompositionEnd = (event) => {
  isComposing.value = false
  handleInput(event)
}

// 监听 textatrea 回车事件
const handleEnter = (event) => {
  // 阻止情况对话时还打个回车的问题
  event.preventDefault();
  
  // 通知父组件：回车键被按下
  emit('enterPressed')
}

// 监听内容变化自动调整大小
watch(() => props.modelValue, () => {
  // 延迟执行，等待内容变化
  nextTick(resizeTextarea)
})

onMounted(() => {
  // 初始调整大小
  nextTick(resizeTextarea())
})
</script>

<style scoped>
</style>